<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法之插值语法</title>

    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        插值语法{{}}中可写什么？
            1.在data中声明的变量，函数等
            2.常量
            3.合法的JavaScript表达式
            4.模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等。
     -->
    <div id="app">
        <!-- data中声明数据 -->
        <h1>{{msg}}</h1>
        <h1>{{sayHello()}}</h1>
        <!-- <h1>{{i}}</h1> -->
        <!-- <h1>{{sum()}}</h1> -->

        <!-- 常量 -->
        <h1>{{100}}</h1>
        <h1>{{'hello vue!'}}</h1>
        <h1>{{3.14159265258979}}</h1>

        <!-- 合法的JavaScript表达式 -->
        <h1>{{50 + 50}}</h1>
        <h1>{{'hello' + ' vue!'}}</h1>
        <h1>{{msg + 3.14159265258979}}</h1>
        <h1>{{gender ? "男" : "女"}}</h1>
        <h1>{{msg.split("").reverse().join("")}}</h1>
        <!-- 这不是表达式，是一个语句 -->
        <!-- <h1>{{var i = 100}}</h1> -->

        <!-- 在白名单里的 -->
        <h1>{{Date}}</h1>
        <h1>{{Date.now()}}</h1>
        <h1>{{Math}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>
    </div>

    <script>
        var i = 1;
        function sum(){
            console.log("sum");
        }

        new Vue({
            el: "#app",
            data: {
                gender: true,
                msg: "Hello Vue!",
                sayHello: function () {
                    console.log("Hello Vue!");
                },
            }
        });
    </script>
</body>
</html>